<template>
  <div class="van-checkbox-dict">
    <van-form :readonly="false" input-align="right">
      <van-checkbox-dict
        label="单选"
        dictType="SEX"
        v-model="value1"
      ></van-checkbox-dict>
      <van-checkbox-dict
        label="过滤数据1"
        @dictChange="handleChange"
        dictType="SEX"
        v-model="value1"
      ></van-checkbox-dict>
      <van-checkbox-dict
        label="过滤数据2"
        @dictChange="handleChange"
        :filterDataFun="filterDataFun"
        :dictType="'SEX'"
        v-model="value3"
      ></van-checkbox-dict>
      <van-checkbox-dict
        label="禁用数据1"
        @dictChange="handleChange"
        :disableObj="{ disableValue: '9' }"
        :dictType="'SEX'"
        v-model="value4"
      ></van-checkbox-dict>
      <van-checkbox-dict
        label="禁用数据2"
        @dictChange="handleChange"
        :disabledDataFun="disabledDataFun"
        :dictType="'SEX'"
        v-model="value5"
      ></van-checkbox-dict>
      <van-checkbox-dict
        label="禁用+过滤"
        @dictChange="handleChange"
        :disableObj="{ disableValue: '9' }"
        :dictType="{ type: 'SEX', filters: '1', reverse: true }"
        v-model="value6"
      ></van-checkbox-dict>
      <van-checkbox-dict
        label="赋值"
        @dictChange="handleChange"
        :dictType="'SEX'"
        v-model="value7"
      ></van-checkbox-dict>
      <van-checkbox-dict
        label="keyValue"
        keyValue
        @dictChange="handleChange"
        :dictType="'SEX'"
        v-model="value8"
      ></van-checkbox-dict>
      <van-checkbox-dict
        @dictChange="handleChange"
        label="祝(自定义数据1)"
        label-width="120px"
        keyValue
        input-align="right"
        :data="list1"
        placeholder="请选择性别"
        v-model="value7"
      ></van-checkbox-dict>
      <van-checkbox-dict
        @dictChange="handleChange"
        label="福(自定义数据2)"
        :format="{ label: 'label2', value: 'value2' }"
        label-width="120px"
        input-align="right"
        :data="list2"
        placeholder="请选择性别"
        v-model="value8"
      ></van-checkbox-dict>
      <van-checkbox-dict
        @dictChange="handleChange"
        label="你(自定义数据3)"
        label-width="120px"
        input-align="right"
        :data="list3"
        placeholder="请选择性别"
        v-model="value9"
      ></van-checkbox-dict>
      <van-checkbox-dict
        @dictChange="handleChange"
        label="性别(赋值)"
        label-width="100px"
        input-align="right"
        dictType="SEX"
        placeholder="请选择性别"
        v-model="value10"
      ></van-checkbox-dict>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
      value6: [],
      value7: ["1", "2"],
      value8: [],
      value9: [],
      value10: ["1"],
      value13: [],
      value14: [],
      list1: [],
      list2: [],
      list3: ["七星高照", "八方来财", "九九同心"]
    }
  },
  created() {
    setTimeout(() => {
      this.value7 = ["1"]
    }, 2000)

    setTimeout(() => {

      this.list1 = [
        {
          label: "一帆风顺",
          value: "1"
        },
        {
          label: "二龙腾飞",
          value: "2"
        },
        {
          label: "三羊开泰",
          value: "3"
        }
      ]
      this.list2 = [
        {
          label2: "四季平安",
          value2: "4"
        },
        {
          label2: "五福临门",
          value2: "5"
        },
        {
          label2: "六六大顺",
          value2: "6"
        }
      ]
    }, 1000)
  },
  methods: {
    handleChange(val) {
      console.log(val)
      console.log(this.value7)
    },
    filterDataFun(list) {
      return list.filter(item => ["1", "2"].includes(item.value))
    },
    disabledDataFun(item) {
      return ["9"].includes(item.value)
    }
  }
}
</script>

<style lang="less" scoped>
.van-checkbox-dict {
  padding: 0 16px;
  .title {
    line-height: 50px;
  }
}
</style>
